<template>
  <!-- 竞价规则弹出 -->
  <el-dialog title="虞都互联竞拍市场规则" top="200px" :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="1050px">
    <div class="guize-box flex fbt" v-if="jjscguize&&jjscguize.bidTimeOut">
      <div class="step step1">
        <div class="sign"></div>
        <div class="tit">开通规则</div>
        <div class="cont-box">
          <p>开通竞拍市场前，必须开通以下功能：</p>
          <p>1.回收管理；<br />
            2.客服即时通讯；<br />
            3.完成包赔实名认证</p>
          <p class="huang">首次开通免费，如果在一个自然月内未达到交易要求，系统将关闭你的竞拍市场权限。</p>
        </div>
      </div>
      <div class="step step2">
        <div class="sign"></div>
        <div class="tit">竞拍规则</div>
        <div class="cont-box">
          <p>1.竞拍出价采用一口价模式，即每个商品每个买家只能出价一次，由卖家决定接受谁的报价。</p>
          <p>2.竞拍商品自发布起，{{jjscguize.bidTimeOut.dictValue}}小时内可以报价，超时无法报价。</p>
          <p>3.竞拍商品自发布起，{{jjscguize.acceptTimeOut.dictValue}}小时内可以接受报价，超时无法接受报价，系统自动取消该商品的竞拍。</p>
        </div>
      </div>
      <div class="step step3">
        <div class="sign"></div>
        <div class="tit">交易流程</div>
        <div class="cont-box"></div>
      </div>
      <div class="step step4">
        <div class="sign"></div>
        <div class="tit">关闭竞拍权限的规则</div>
        <div class="huang" style="margin-top: 10px;">
          在一个自然月有以下情况的，在次月1号系统将自动关闭你的竞拍权限：
        </div>
        <div class="buyer">
          买家：
        </div>
        <div class="">
          <p>1.一个自然月内，中标成交率低于{{jjscguize['买家规则1'].dictValue}}%的；</p>
          <p>2.一个自然月内，未报价天数超过{{jjscguize['买家规则2'].dictValue}}天的；</p>
        </div>
        <div class="buyer">
          卖家：
        </div>
        <div class="">
          <p>1.一个自然月内，发布少于{{fabuMinnumDays.goodsNum}}个竞拍商品的天数超过{{fabuMinnumDays.dayNum}}天的；</p>
          <p>2.一个自然月内，报价人数多于{{bjPtimes.personNum}}人的商品未接受报价的，超过{{bjPtimes.times}}次的；</p>
          <p>3.一个自然月内，接受报价后不成交的商品超过接受报价商品数的{{jjscguize['卖家规则3'].dictValue }}%的；</p>
        </div>

      </div>
      <div class="tip">
        <p>提示：竞拍权限关闭后可再次开通，再次开通需要扣除{{jjscguize['againCost'].dictValue}}虞豆。</p>
        <p>开通后请尽快学习竞拍市场的操作，以便更快更好的参与竞拍！</p>
      </div>

    </div>
    <div style="height: 100px;"></div>
    <div class="center">
      <el-button style="width: 184px;
            height: 47px;
            background: #6C5DD3;
            color: #fff;
            margin-top: 10px;
            border-radius: 4px;" @click="dialogVisible=false">
        知道了</el-button>
        <el-button v-if="!shopInfo.groups.includes('5492')" @click="goKaitong" style="width: 184px;
            height: 47px;
            background: #6C5DD3;
            color: #fff;
            margin-top: 10px;
            border-radius: 4px;" >
        去开通</el-button>
    </div>
  </el-dialog>
</template>

<script>
import jingpaiApi from "@/api/jingpaishichang/index.js";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      jjscguize: {},
      fabuMinnumDays: {
        goodsNum: "",
        dayNum: "",
      }, //一个自然月内，发布少于 x 个竞拍商品超过 x 天的。 用逗号分隔填写

      bjPtimes: {
        personNum: "",
        times: "",
      }, //一个自然月内，报价人数多于 x 人的商品且未接受报价 超过 x 次的 。 用逗号分隔填写
    };
  },
  computed: {
    shopInfo() {
      return this.$store.getters.shopInfo;
    }
  },
  methods: {
    // 打开弹窗
    open(id, flag) {
      this.dialogVisible = true;
      this.getJJSCguize();
    },
    //获取竞价回收规则字典
    async getJJSCguize() {
      const res = await this.getDicts("biddingRule");
      if (res.data && res.data.length) {
        this.jjscguize = this.arrayToObject(res.data, "dictLabel");
        if (this.jjscguize["卖家规则1"]) {
          // 一个自然月内，发布少于 x 个竞拍商品超过 x 天的。 用逗号分隔填写
          const guize3 = this.jjscguize["卖家规则1"].dictValue;
          if (guize3 && guize3.includes(",")) {
            this.fabuMinnumDays.goodsNum = guize3.split(",")[0];
            this.fabuMinnumDays.dayNum = guize3.split(",")[1];
          }
        }
        if (this.jjscguize["卖家规则2"]) {
          // 一个自然月内，发布少于 x 个竞拍商品超过 x 天的。 用逗号分隔填写
          const guize4 = this.jjscguize["卖家规则2"].dictValue;
          if (guize4 && guize4.includes(",")) {
            this.bjPtimes.personNum = guize4.split(",")[0];
            this.bjPtimes.times = guize4.split(",")[1];
          }
        }
      }
    },
    goKaitong(){
      this.dialogVisible=false
      this.$router.push({
        path:'/jifenshangcheng'
      })
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.guize-box {
  flex-wrap: wrap;
  padding: 0 6px;
}
.huang {
  color: #fa6400;
}
.step {
  width: 485px;
  flex-shrink: 0;
  position: relative;
  background-color: #f1efff;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 15px;
  padding-left: 24px;
  color: #6c5dd3;
  font-size: 16px;
  line-height: 24px;
  .tit {
    padding-left: 20px;
    font-size: 18px;
    color: #6c5dd3;
    font-weight: bold;
  }
  p {
    margin: 0;
  }
  .cont-box {
    padding-top: 15px;
  }
  .buyer {
    color: #333;
    margin-top: 5px;
  }
  .sign {
    width: 32px;
    height: 32px;
    background-image: url("../../../assets/images/stepsign1.png");
    background-size: 100% 100%;
    position: absolute;
    left: -5px;
    top: 0;
  }
}
.step2 {
  .sign {
    background-image: url("../../../assets/images/stepsign2.png");
  }
}
.step3 {
  width: 485px;
  // height: 325px;
  // background-image: url('../../../assets/images/guize3.png');
  // background-size: 100% 100%;
  // background-color: transparent;
  .sign {
    background-image: url("../../../assets/images/stepsign3.png");
  }
  .cont-box {
    width: 298px;
    height: 246px;
    background-image: url("../../../assets/images/guize3.png");
    background-size: 100% 100%;
    margin-top: 15px;
  }
}
.step4 {
  .sign {
    background-image: url("../../../assets/images/stepsign4.png");
  }
}
.tip {
  p {
    margin: 0;
    font-weight: 601;
    font-size: 18px;
    color: #fa6400;
    line-height: 40px;
    &:nth-of-type(2) {
      font-weight: 400;
    }
  }
}
.center{
  width: 100%;
  position: absolute;
  bottom: 0;
  height:80px;
  background: #fff;
}
</style>
